<template>
  <v-app>
    <v-navigation-drawer
      v-model="drawer"
      :rail="rail"
      permanent
      @click="rail = false"
    >
      <SmartListNavigation 
        :current-list-id="currentListId"
        @list-selected="onListSelected"
      />
    </v-navigation-drawer>

    <v-app-bar
      :order="-1"
      color="primary"
    >
      <v-app-bar-nav-icon
        variant="text"
        @click.stop="rail = !rail"
      />
      
      <v-toolbar-title>智能任务管理</v-toolbar-title>
      
      <v-spacer />
      
      <v-btn
        icon="mdi-theme-light-dark"
        @click="toggleTheme"
      />
    </v-app-bar>

    <v-main>
      <v-container fluid class="pa-4">
        <SmartListView 
          :current-list-id="currentListId"
        />
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useTheme } from 'vuetify'
import SmartListNavigation from '@/components/SmartListNavigation.vue'
import SmartListView from '@/components/SmartListView.vue'

const theme = useTheme()
const drawer = ref(true)
const rail = ref(false)
const currentListId = ref('today')

const toggleTheme = () => {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}

const onListSelected = (listId: string) => {
  currentListId.value = listId
  rail.value = true
}
</script>
